<style include="internet-shared iron-flex">
  .settings-box {
    border-top: var(
        --network-summary-item-border-top, var(--cr-separator-line));
  }

  network-siminfo {
    padding-inline-start: var(--cr-section-padding);
  }

  #outerBox {
    padding: 0 var(--cr-section-padding);
  }

  #details {
    align-items: center;
    display: flex;
    flex: auto;
  }

  .network-state {
    color: var(--cr-secondary-text-color);
    font-size: inherit;
  }

  .locked-warning-message {
    color: var(--cros-text-color-warning);
    font-size: inherit;
  }
</style>
<div class="settings-box two-line no-padding">
  <div actionable$="[[isItemActionable_(activeNetworkState,
                        deviceState, networkStateList)]]"
      class="flex layout horizontal center link-wrapper"
      on-click="onShowDetailsTap_">
    <div id="details" no-flex$="[[showSimInfo_(deviceState)]]"
          aria-hidden="true">
      <network-icon
          id="networkIcon"
          show-technology-badge="[[showTechnologyBadge_]]"
          network-state="[[activeNetworkState]]"
          device-state="[[deviceState]]">
      </network-icon>
      <div class="flex settings-box-text">
        <div id="networkTitleText">
          [[getTitleText_(activeNetworkState)]]
        </div>
        <div id="networkState"
            class$="[[getNetworkStateClass_(deviceState, deviceState.*)]]">
          [[getNetworkStateText_(activeNetworkState, deviceState.*)]]
        </div>
      </div>
    </div>

    <template is="dom-if" if="[[showSimInfo_(deviceState)]]" restamp>
      <network-siminfo
          on-click="doNothing_"
          network-state="[[activeNetworkState]]"
          device-state="[[deviceState]]">
      </network-siminfo>
    </template>

    <template is="dom-if" if="[[showPolicyIndicator_(activeNetworkState)]]">
      <cr-policy-indicator id="policyIndicator"
          icon-aria-label="[[getTitleText_(activeNetworkState)]]"
          indicator-type="[[getPolicyIndicatorType_(activeNetworkState)]]"
          on-click="doNothing_">
      </cr-policy-indicator>
    </template>

    <template is="dom-if" if="[[showArrowButton_(activeNetworkState,
                                  deviceState, networkStateList)]]">
      <cr-icon-button class="subpage-arrow"
          aria-labelledby="networkTitleText"
          aria-describedby="networkState networkIcon"
          aria-roledescription="$i18n{subpageArrowRoleDescription}">
      </cr-icon-button>
    </template>
  </div>

  <template is="dom-if" if="[[enableToggleIsVisible_(deviceState)]]">
    <div class="separator"></div>
    <cr-toggle id="deviceEnabledButton"
        class="margin-matches-padding"
        aria-label$="[[getToggleA11yString_(deviceState)]]"
        aria-describedby$="[[getToggleA11yDescribedBy_(deviceState)]]"
        checked="[[deviceIsEnabled_(deviceState)]]"
        disabled="[[!enableToggleIsEnabled_(deviceState)]]"
        on-change="onDeviceEnabledChange_">
    </cr-toggle>
  </template>
</div>
